<template>
  <page-header-wrapper>
    <a-card class="top_card" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">
             <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input-search v-model="queryParam.keyword" style="width: 100%" placeholder="请输入关键词" />
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="订单类型">
                <a-select placeholder="请选择" v-model="queryParam.orderWaimai" default-value="1">
                  <a-select-option value="1">全部</a-select-option>
                  <a-select-option value="2">普通订单</a-select-option>
                  <a-select-option value="4">外卖订单</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="订单时间">
                <a-config-provider :locale="locale">
                  <a-range-picker
                    format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%"
                    @change="onChange"
                    @calendarChange="calendarChange"
                    :ranges="ranges"
                  />
                </a-config-provider>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="来源平台">
                <a-select v-model="queryParam.platform" placeholder="请选择" default-value="">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="0">微信小程序</a-select-option>
                  <a-select-option value="2">微信公众号</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button
                  style="margin-right: 8px"
                  @click="() => (this.queryParam = { status: this.tabKey, is_offline: '1' })"
                  >重置</a-button
                >
                <a-button type="primary" @click="getOrderListData(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs @change="tabChange" v-model="tabKey">
        <a-tab-pane key="" tab="全部"> </a-tab-pane>
        <a-tab-pane key="1" tab="待发货"> </a-tab-pane>
        <a-tab-pane key="2" tab="已发货"> </a-tab-pane>
        <a-tab-pane key="3" tab="已完成"> </a-tab-pane>
        <a-tab-pane key="7" tab="异常订单"> </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card style="margin-top: 10px" :bordered="false" title="配送订单">
      <div slot="extra"><a-button type="primary" icon="plus">新建</a-button></div>
      <a-spin :spinning="spinning">
        <ListTable ref="listTable" :list_th="list_th" :pagaData="pagaData"> </ListTable>
      </a-spin>
      <div style="float: right">
        <Pagination v-model="pageParams.pageNo" :total="totalCount" show-less-items />
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { Pagination } from 'ant-design-vue'
import ListTable from './components/ListTable'
import { getOrderList } from '@/api/order'
export default {
  name: 'OrderList',
  components: {
    ListTable,
    Pagination,
  },
  data() {
    return {
      spinning: false,
      list_th: [
        { type: 'delivery', title: '产品名称', span: 5 },
        { type: 'delivery', title: '单价/数量', span: 4 },
        { type: 'delivery', title: '运费', span: 3 },
        { type: 'delivery', title: '实际付款', span: 2 },
        { type: 'delivery', title: '发货方式', span: 2 },
        { type: 'delivery', title: '配送状态', span: 2 },
        { type: 'delivery', title: '配送员', span: 2 },
        { type: 'delivery', title: '操作', span: 3 },
      ],
      activeKey: '1',
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      queryParam: {
        is_offline: '1',
      },
      tabKey: '',
      selectDate: {},
      totalCount: 0,
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      pagaData: [],
    }
  },
  watch: {
    currentPage() {
      this.getOrderListData()
    },
  },
  created() {
    this.getOrderListData()
  },
  activated() {},
  computed: {
    currentPage() {
      return this.pageParams.pageNo || 1
    },
  },
  filters: {},
  methods: {
    getOrderListData(flag) {
      this.spinning = true
      if (flag) {
        this.pageParams.pageNo = 1
      }
      let params = {
        ...this.queryParam,
        ...this.pageParams,
      }
      getOrderList(params).then((res) => {
        if (res.code === 0) {
          this.pagaData = res.data.data
          this.totalCount = res.data.totalCount
        } else {
          that.$message.error(res.msg)
        }
        this.spinning = false
      })
    },
    resetSearchForm() {
      this.queryParam = {
        dateStart: moment(new Date()),
        dateEnd: moment(new Date()),
      }
    },
    moment,
    calendarChange(date, dateString) {
      this.selectDate = date[0]
    },
    onChange(date, dateString) {
      this.queryParam.dateStart = dateString[0]
      this.queryParam.dateEnd = dateString[1]
    },
    tabChange(key) {
      this.queryParam.status = key
      this.getOrderListData()
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-card-head {
  border-bottom: none;
}
.top_card {
  /deep/.ant-card-body {
    padding-bottom: 0;
  }
  /deep/.ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
</style>
